<template>
  <div class="select">
    <el-select v-model="value" placeholder="请选择">
      <el-option
        v-for="item in cities"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
        <span style="float: left">{{ item.label }}</span>
        <span style="float: right; color: #8492a6; font-size: 13px">{{
          item.value
        }}</span>
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  name: "Collection",
  data() {
    return {
      value:"",
      cities: [
        {
          value: "Jinan",
          label: "济南",
        },
        {
          value: "Beijing",
          label: "北京",
        },
        {
          value: "Shanghai",
          label: "上海",
        },
        {
          value: "Nanjing",
          label: "南京",
        },
        {
          value: "Chengdu",
          label: "成都",
        },
        {
          value: "Shenzhen",
          label: "深圳",
        },
        {
          value: "Guangzhou",
          label: "广州",
        },
      ],
      value: "",
    };
  },
  methods: {},
  watch: {
    // 监听message的变化
    value(newVal, oldVal) {
      this.$emit('sendFromChild', newVal);
      //console.log(`message changed from ${oldVal} to ${newVal}`);
      // 在这里可以执行更多的逻辑
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>